<template>
  <div>
    <el-form ref="formRef" :rules="rules" :model="userForm" label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="姓名" prop="username">
            <el-input v-model="userForm.username" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" type="password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item>
            <el-button type="primary" plain round @click="onSubmit">更新</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getUserInfoSimpleRequest, updateUserInfoSimpleRequest } from '@/api/employees'
export default {
  data() {
    return {
      // 更新表单数据初始化
      userForm: {
        username: '',
        password: ''
      },
      // 定义校验规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 4, message: '请输入 2 ~ 4 位用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getUserInfoSimple()
  },
  methods: {
    // ^ ==================== 定义函数发送请求 ====================
    // 请求 - 获取员工基本信息
    async getUserInfoSimple() {
      try {
        const res = await getUserInfoSimpleRequest(this.$route.query?.id || '')
        if (res.success) {
          this.userForm = res.data // 数据回显
        } else {
          console.log('获取员工基本信息失败')
        }
      } catch (error) {
        console.log('获取员工基本信息失败!', error)
      }
    },
    // 请求 - 更新/保存员工基本信息
    async updateUserInfoSimple() {
      try {
        const res = await updateUserInfoSimpleRequest(this.userForm)
        if (res.success) {
          this.$message.success('更新角色基本信息成功!')
          this.$router.back() // 更新成功, 退回到上一个路由地址页面
        } else {
          this.$message.error('更新角色基本信息失败!')
        }
      } catch (error) {
        console.log('保存员工基本信息失败', error)
      }
    },
    // ^ ==================== 定义事件处理函数 ====================
    // 事件 - 更新按钮
    onSubmit() {
      this.$refs.formRef.validate(val => { // 兜底校验
        if (!val) return this.$message.error('请输入正确内容后再提交')
        this.updateUserInfoSimple() // 调用函数更新角色基本信息
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// element-ui 里面, 通过 xs sm md lg xl 这几个属性, 来区分我们设备是手机屏幕, 还是平板, 还是笔记本, 还是大屏
// 然后动态给他填了很多类名, 类名很多, 但是生效机制不太一样
// 通过媒体查询, 设置min-width 让我们同一个元素是在不同的设备上宽度不一样
.el-form {
  .el-form-item {
    margin-top: 10px;
    .el-button {
      width: 100%;
    }
  }
}
</style>
